<template>
	<view v-if="show" class="functions-fixed-box">
		<view class="function-hide mb-20">
			<view id="HideBox" class="transition500 w-100" style="overflow: hidden;"
				:style="{'max-height':showAllFunctions?130*5+10+'rpx':'0'}">
				<view @click="item.event()" class="function-item2 fc-ac" v-for="(item,index) in iconMore" :key="index">
					<up-icon :name="item.icon" customPrefix="custom-icon" :color="publicStyles['--color']" size="24"></up-icon>
					<view class="w-75 fs-24 t-c my-5">
						{{item.name}}
					</view>
				</view>
			</view>
	
			<view @click="showAllFunctions = !showAllFunctions" :class="showAllFunctions?'':'full'"
				class="function-item transition500 fr-ac-jc" style="margin-bottom: 0;">
				<view class="">
					<up-icon name="gengduo" customPrefix="custom-icon" :color="showAllFunctions?publicStyles['--color']:'#fff'" size="24"></up-icon>
				</view>
				<!-- <image style="width: 35rpx;height: 35rpx;" src="/src/static/logo.png" mode=""></image> -->
			</view>
		</view>
		<view @click="item.event()" class="function-item  fr-ac-jc" v-for="(item,index) in iconBase" :key="index">
			<up-icon :name="item.icon" customPrefix="custom-icon" :color="publicStyles['--color']" size="24"></up-icon>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		watch,
		getCurrentInstance
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useColorStore
	} from '@/store/color'
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	const props = defineProps({
		show:{
			default:false
		},
		iconBase:{
			default:[]
		},
		iconMore:{
			default:[]
		}
	})
	const CurrentInstance = getCurrentInstance()
	const showAllFunctions = ref(false)
	// watch(()=>props.show,(newVal)=>{
	// 	if(newVal === true){
	// 		nextTick(()=>{
	// 			uni.createSelectorQuery().in(CurrentInstance.proxy).select('#HideBox').boundingClientRect(data => {
	// 				console.log(data,'datadata')
	// 			}).exec()
	// 		})
	// 	}
	// })
	onMounted(()=>{
		
	})
	
</script>

<style lang="scss">
	.functions-fixed-box {
		position: fixed;
		top: 140px;
		right: 30rpx;
		width: fit-content;
		z-index: 900;
	
		.function-hide {
			width: 64rpx;
			border-radius: 32rpx;
			background-color: #fff;
			box-shadow: 2rpx 2rpx 12rpx #ddd;
		}
	
		.function-item {
			margin-bottom: 20rpx;
			width: 64rpx;
			height: 64rpx;
			border-radius: 32rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 2rpx 2rpx 12rpx #ddd;
	
			&.full {
				background-color: #10C4A8;
			}
		}
	
		.function-item2 {
			margin: 10rpx 0;
			width: 64rpx;
			min-height: 64rpx;
			border-radius: 32rpx;
			box-sizing: border-box;
	
			&.full {
				background-color: #10C4A8;
			}
		}
	}
</style>